<script setup lang="ts">
import { useRouter, RouterView } from "vue-router";

const router = useRouter();
const goTo = (url) => {
  router.push(url);
};
</script>
<template>
  <div class="layout">
    <div class="sidebar">
      <ul>
        <li class="menu-item" @click="goTo('/sub-react')">子应用1 (React)</li>
        <li class="menu-item" @click="goTo('/sub-vue')">子应用2 (Vue)</li>
      </ul>
    </div>
    <RouterView></RouterView>
  </div>
</template>

<style lang="scss" scoped>
.layout {
  height: calc(100% - 80px);
  display: flex;
}
.sidebar {
  width: 300px;
  height: 100%;
  background: #f4f4f4;
}
.menu-item {
  height: 32px;
  line-height: 32px;
}
</style>
